<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YSL圣罗兰购物袋</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font_3525664_hl6sgsbzfxd/iconfont.css">
    <link rel="stylesheet" href="lib/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/cart.css">
</head>

<body>
    <!-- 注册登录层 -->
    <section class="login">
        <section class="mask">
        </section>
        <section class="lgn">
            <div class="off">关闭</div>
            <div class="login-title">欢迎登录YSL官网</div>
            <div class="choce">
                <div class="zhuce">短信快捷登录/注册</div>
                <div class="denglu">账号密码登录</div>
            </div>
            <div class="zhuce-content">
                <div class="b1"><input type="text" placeholder="手机号" name="username" class="name"></div>
                <div class="b2">
                    <div class="yzm"><input type="password" placeholder="密码" name="userpass" class="pass"></div>
                    <!-- <div class="yanzhengma"></div> -->
                </div>
                <div class="b3">
                    <div class="b31">
                        <input type="text" placeholder="短信验证码">
                    </div>
                    <div class="b32">
                        <input type="button" value="发送验证码">
                    </div>
                </div>
                <div class="b4">
                    <p>
                        <input type="checkbox" id="agree">
                        <label for="agree">
                            我同意
                            <a href="https://policy.lorealchina.com/termsofusewebsite" target="_blank">使用条款</a>
                            和
                            <a href="https://policy.lorealchina.com/privacypolicy" target="_blank">隐私政策</a>
                        </label>
                    </p>
                </div>
                <div class="b5">
                    <button id="zc">注册</button>
                </div>
                <div class="b6">
                    <p>使用第三方账号登录</p>
                    <ul>
                        <li>
                            <a
                                href="https://open.weixin.qq.com/connect/qrconnect?appid=wx376c94aeca8fe420&redirect_uri=https%3A%2F%2Fwww.yslbeautycn.com%2Fmember%2Flogin%2FweChat%2FcallBack&response_type=code&scope=snsapi_login&state=62b26fb3-a9cb-4993-b543-57dbff17d3b7#wechat_redirec">
                                <span class="iconfont icon-weixin"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://www.yslbeautycn.com/member/constructAlipayLoginURL?pageSign=PAGE_FROM_SIGN_LOGIN&deviceId=BTfpXFnQF5ZnEWY%2BfJHg1BM3LJvoAs7hhn4HwzwJhsO3Gc7meqXSQIjgIo0ezPDjA%2FK%2FmG2R2fFVp07sSkxnhPg%3D%3D">
                                <span class="iconfont icon-iconfonticons"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&redirect_uri=https://www.yslbeautycn.com/member/qQBack&client_id=101466990">
                                <span class="iconfont icon-QQ"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://api.weibo.com/oauth2/authorize?response_type=code&redirect_uri=https://www.yslbeautycn.com/member/login/weibo/callBack&client_id=2983287192">
                                <span class="iconfont icon-weibo"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="denglu-content">
                <div class="b1"><input type="text" placeholder="手机号"></div>
                <div class="b1"><input type="password" placeholder="密码"></div>
                <div class="b4">
                    <p>
                        <input type="checkbox" id="remember">
                        <label for="remember">
                            记住用户名
                        </label>
                        <a href="">忘记密码？</a>
                    </p>
                </div>
                <div class="b5">
                    <button>登录</button>
                </div>
                <div class="b6">
                    <p>使用第三方账号登录</p>
                    <ul>
                        <li>
                            <a
                                href="https://open.weixin.qq.com/connect/qrconnect?appid=wx376c94aeca8fe420&redirect_uri=https%3A%2F%2Fwww.yslbeautycn.com%2Fmember%2Flogin%2FweChat%2FcallBack&response_type=code&scope=snsapi_login&state=62b26fb3-a9cb-4993-b543-57dbff17d3b7#wechat_redirec">
                                <span class="iconfont icon-weixin"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://www.yslbeautycn.com/member/constructAlipayLoginURL?pageSign=PAGE_FROM_SIGN_LOGIN&deviceId=BTfpXFnQF5ZnEWY%2BfJHg1BM3LJvoAs7hhn4HwzwJhsO3Gc7meqXSQIjgIo0ezPDjA%2FK%2FmG2R2fFVp07sSkxnhPg%3D%3D">
                                <span class="iconfont icon-iconfonticons"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&redirect_uri=https://www.yslbeautycn.com/member/qQBack&client_id=101466990">
                                <span class="iconfont icon-QQ"></span>
                            </a>
                        </li>
                        <li>
                            <a
                                href="https://api.weibo.com/oauth2/authorize?response_type=code&redirect_uri=https://www.yslbeautycn.com/member/login/weibo/callBack&client_id=2983287192">
                                <span class="iconfont icon-weibo"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </section>
    <!-- 顶部区域 -->
    <header>
        <section class="center">
            <h1><a href="homepage.html"><img src="./img/logo@2x.png" alt=""></a></h1>
        </section>

    </header>
    <!-- 内容区域 -->
    <main>
        <div class="center">
            <!-- 右侧内容 -->
            <div class="left">
                <div class="back"><a href="homepage.html">&lt;继续购物</a></div>
                <div class="cart-content">
                    <h2 class="cart-tittle">您的购物袋为空</h2>
                    <div class="choce-product">
                        <div class="hot">
                            <p>选购热销单品</p>
                            <a href="homepage.html">立即挑选</a>
                        </div>
                        <div class="like">
                            <p>挑选称心礼物</p>
                            <a href="homepage.html">立即购买</a>
                        </div>
                    </div>
                    <div class="youlike">
                        <p>您可能会喜欢</p>
                        <div class="like-box">
                            <!-- 第一个 -->
                            <div>
                                <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                <div>
                                    <p class="title">圣罗兰细管丝绒纯口红</p>
                                    <p class="sm">裸感半哑光 颠覆而来</p>
                                    <p class="star">
                                        ★★★★★
                                    </p>
                                    <!-- 小轮播 -->
                                    <div class="swiper-container swiper2">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                        </div>
                                        <!-- 如果需要分页器 -->
                                        <div class="swiper-pagination swiper-pagination2"></div>

                                        <!-- 如果需要导航按钮 -->
                                        <div class="swiper-button-prev swiper-button-prev2"></div>
                                        <div class="swiper-button-next swiper-button-next2"></div>
                                    </div>
                                    <p class="se">N°314 冷茶</p>
                                    <p class="di">
                                        <span>¥350</span>
                                        <span>丨</span>
                                        <span>
                                            <i class="iconfont icon-24gl-bag"></i>
                                            <b>加入购物车</b>
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <!-- 第二个 -->
                            <div>
                                <a href="lisk.html"><img src="./img/cz1.jpg" alt=""></a>
                                <div>
                                    <p class="title">圣罗兰细管丝绒纯口红</p>
                                    <p class="sm">裸感半哑光 颠覆而来</p>
                                    <p class="star">
                                        ★★★★★
                                    </p>
                                    <!-- 小轮播 -->
                                    <div class="swiper-container swiper2">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div class="color"></div>
                                            </div>
                                        </div>
                                        <!-- 如果需要分页器 -->
                                        <div class="swiper-pagination swiper-pagination2"></div>

                                        <!-- 如果需要导航按钮 -->
                                        <div class="swiper-button-prev swiper-button-prev2"></div>
                                        <div class="swiper-button-next swiper-button-next2"></div>
                                    </div>
                                    <p class="se">N°314 冷茶</p>
                                    <p class="di">
                                        <span>¥350</span>
                                        <span>丨</span>
                                        <span>
                                            <i class="iconfont icon-24gl-bag"></i>
                                            <b>加入购物车</b>
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="car-login">
                        <div>
                            <p class="car-logintitle">加入会员 臻享专属服务</p>
                            <p class="car-logintext">会员可享受多种回馈礼遇、优先发货、新潮活动抢先体验等特权。</p>
                        </div>
                        <a class="log" href="">立即注册/登录</a>
                    </div>
                </div>
            </div>
            <!-- 左侧内容 -->
            <div class="right">
                <div class="right-tittle">
                    <p class="p1">客户服务</p>
                    <p class="p2">400-820-6362</p>
                    <span class="iconfont icon-xiaoxi"></span>
                    <span class="p3">联系客服</span>
                </div>
                <div class="right-middle">
                    <p>安全支付</p>
                    <div>
                        <div class="middle-item">
                            <span class="iconfont icon-iconfonticons"></span>
                            <span>支付宝</span>
                        </div>
                        <div class="middle-item">
                            <span class="iconfont icon-weixin"></span>
                            <span>微信</span>
                        </div>
                        <div class="middle-item">
                            <span class="iconfont icon-weibo"></span>
                            <span>云闪付</span>
                        </div>
                        <div class="middle-item">
                            <span class="iconfont icon-baiduMaps"></span>
                            <span>花呗分期</span>
                        </div>
                    </div>
                </div>
                <div class="right-bottom">
                    <p>YSL放心购</p>
                    <div>
                        <div class="bottom-item">
                            <img src="https://res.yslbeautycn.com/build/images/emptyShoppingCart/shoppingCart_lettering_black.png" alt="">
                            <p>专属刻字</p>
                        </div>
                        <div class="bottom-item">
                            <img src="https://res.yslbeautycn.com/build/images/emptyShoppingCart/shoppingCart_quality_black.png">
                            <p>正品保证</p>
                        </div>
                        <div class="bottom-item">
                            <img src="https://res.yslbeautycn.com/build/images/emptyShoppingCart/shoppingCart_shipping_black.png" alt="">
                            <p>顺丰包邮</p>
                        </div>
                        <div class="bottom-item">
                            <img src="https://res.yslbeautycn.com/build/images/emptyShoppingCart/shoppingCart_giftBox_black.png" alt="">
                            <p>精美礼盒</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 底部区域 -->
    <footer>
        <section class="top">
            <div class="topitem">
                <img src="./img/ti1.png" alt="">
                <p class="title">独家优惠</p>
                <p class="content">独家在线产品和特权</p>
            </div>
            <div class="topitem">
                <img src="./img/ti2.png" alt="">
                <p class="title">正品保证</p>
                <p class="content">官方直供原装</p>
            </div>
            <div class="topitem">
                <img src="./img/ti3.png" alt="">
                <p class="title">免费顺丰速递</p>
                <p class="content">港澳台偏远地区除外亦可提供普通快递服务</p>
            </div>
            <div class="topitem">
                <img src="./img/ti4.png" alt="">
                <p class="title">高定礼盒</p>
                <p class="content">尊享YSL高定礼盒包装甄享官网专属定制服务</p>
            </div>
        </section>
        <section class="middle">
            <ul>
                <li>彩妆</li>
                <li>唇部</li>
                <li>面部</li>
                <li>眼部</li>
            </ul>
            <ul>
                <li>香水</li>
                <li>女士香水</li>
                <li>男士香水</li>
                <li>高定香水</li>
            </ul>
            <ul>
                <li>护肤</li>
                <li>按产品分类</li>
                <li>按功能分类</li>
                <li>按系列分类</li>
            </ul>
            <ul>
                <li>关注我们</li>
                <li>微博</li>
                <li>微信</li>
                <li>抖音</li>
                <li>小红书</li>
            </ul>
            <ul>
                <li>联系我们</li>
                <li>在线客服</li>
                <li>电话：400-820-6362</li>
            </ul>
            <ul>
                <li>订阅电子杂志</li>
                <div class="srk">
                    <input class="text" type="email" placeholder="请输入您的电子邮箱">
                    <input class="submit" type="submit" value="订阅">
                </div>
            </ul>
        </section>
        <section class="bottom">
            <p>国家药监局提示您：宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注“国妆特字”或者“国妆特进字”的标准文号。</p>
            <div>
                <div class="left">
                    <p>© 欧莱雅（中国）有限公司</p>
                    <p>中国工商</p>
                    <p>沪ICP备08100043号-28</p>
                    <p>沪公网安备 31010602001529号</p>
                </div>
                <div class="right">
                    <p>网站地图</p>
                    <p>隐私政策</p>
                    <p>使用条款</p>
                    <p>Cookies政策</p>
                </div>
            </div>
        </section>
    </footer>
</body>

</html>
<script src="lib/swiper-bundle.min.js"></script>
<script>
    // 产品区域小轮播图
    var mySwiper2 = new Swiper('.swiper2', {
        direction: 'horizontal', // 水平切换选项
        slidesPerView: 5,
        // 如果需要前进后退按钮
        navigation: {
            prevEl: '.swiper-button-prev2',
            nextEl: '.swiper-button-next2',
        },
    })
</script>
<script src="./js/jquery/jquery.min.js"></script>
<script src="./js/car.js"></script>